<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
  <div class="inputoutput">
    <img id="imagSrc" alt="No Image" />
    <div class="caption">imageSrc <input type="file" id="fileInput1" name="file" /></div>
  </div>
  <div class="inputoutput">
    <canvas id="canvasInput1" ></canvas>
    <div class="caption">canvasInput1</div>
  </div>
  <div class="inputoutput">
    <img id="imagSrc" alt="No Image" />
    <div class="caption">imageSrc <input type="file" id="fileInput2" name="file" /></div>
  </div>
  <div class="inputoutput">
    <canvas id="canvasInput2" ></canvas>
    <div class="caption">canvasInput2</div>
  </div>
  <div class="inputoutput">
    <canvas id="canvasOutput" ></canvas>
    <div class="caption">canvasOutput</div>
  </div>
  <div>
<input type="button" title="开" value="开" onclick="callback();" /><br />  
  <div>
</div>
<script type="text/javascript">
let imgElement1 = new Image();
let imgElement2 = new Image();
let inputElement1 = document.getElementById('fileInput1');
let inputElement2 = document.getElementById('fileInput2');
let canvas1 =document.getElementById('canvasInput1');
let canvas2 =document.getElementById('canvasInput2');
let ctx1 = canvas1.getContext('2d');
let ctx2 = canvas2.getContext('2d');
imgElement1.onload = function() {
ctx1.drawImage(imgElement1, 0, 0);
};
imgElement2.onload = function() {
ctx2.drawImage(imgElement2, 0, 0);
};
inputElement1.addEventListener('change', (e) => {
  imgElement1.src = URL.createObjectURL(e.target.files[0]);
}, false);
inputElement2.addEventListener('change', (e) => {
  imgElement2.src = URL.createObjectURL(e.target.files[0]);
}, false);
function callback(){
let trackbar = document.getElementById('trackbar');
let src = cv.imread('canvasInput1');
let templ = cv.imread('canvasInput2');
let dst = new cv.Mat();
let mask = new cv.Mat();
cv.matchTemplate(src, templ, dst, cv.TM_CCOEFF, mask);
let result = cv.minMaxLoc(dst, mask);
let maxPoint = result.maxLoc;
let color = new cv.Scalar(255, 0, 0, 255);
let point = new cv.Point(maxPoint.x + templ.cols, maxPoint.y + templ.rows);
cv.rectangle(src, maxPoint, point, color, 2, cv.LINE_8, 0);
cv.imshow('canvasOutput', src);
src.delete(); dst.delete(); mask.delete();}

function onOpenCvReady() {
  document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="/home/db/opencvjs/opencv-3.4.2/build_js/bin/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>
